<template>
	<view>
		<view class="r-goods-box">
			<view class="top-image flex items-center">
				<u-image class="img" width="120" src="/static/images/goods_box_top_icon.png" mode="widthFix"></u-image>
			</view>
			<u-image class="star1" width="18" src="/static/images/star_icon.png" mode="widthFix"></u-image>
			<u-image class="star2" width="18" src="/static/images/star_icon.png" mode="widthFix"></u-image>
			<u-image class="star3" width="18" src="/static/images/star_icon.png" mode="widthFix"></u-image>
			<view class="flex items-center justify-between px-24">
				<view class="flex items-center">
					<view class="font-32 font-bold">
						<u-image width="128" src="/static/images/recommend_goods_title.png" mode="widthFix"></u-image>
					</view>
					<text class="font-24 ml-8" style="color: #666;"> / 吃喝玩乐提前囤</text>
				</view>
				<view class="change-icon flex py-6 px-12" hover-class="hover-class" hover-stay-time="150">
					<u-icon name="reload" color="#333"></u-icon>
					<text class="ml-6 font-24" @tap="changeGroup">换一换</text>
				</view>
			</view>
			<view class="goods-info-box flex items-center justify-between px-24 mt-24">
				<view class="goods-info" v-for="(item, index) of list[active]" :key="index"
					@click.stop="$ut.route('pages/store/index',{id: item.shopId, commodityId: item.id, commodityTypeId: item.commodityTypeId})">
					<u-image width="208" border-radius="24" height="216" :src="$ut.setImgae(item.image)"
						mode="aspectFill"></u-image>
					<view class="goods-name my-12 ml-8 line-2">
						{{ item.name }}
					</view>
					<view class="pb-24">
						<text class="price font-30">{{ item.memberPrice }}</text>
						<text class="grid-price">{{ item.originalPrice }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'recommended-goods',
		data() {
			return {
				active: 0 // 数组标记位
			}
		},
		props: {
			maxLength: {
				type: Number,
				default: 0
			},
			list: {
				type: Array,
				default () {
					return []
				}
			}
		},
		methods: {
			changeGroup() {
				// 如果大于最大则重置归0
				if (this.active >= this.maxLength) return this.active = 0;
				else this.active += 1;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.r-goods-box {
		padding-top: 24rpx;
		border-radius: 24rpx;
		border: 4rpx solid #fff;
		background-image: linear-gradient(to right, #f9f2d8, #f9efe5);
		position: relative;

		.top-image {
			width: 690rpx;
			// background-color: red;
			position: absolute;
			top: -32rpx;
			left: 0;
			z-index: 2;

			.img {
				transform: translateX(280rpx);
			}
		}

		.change-icon {
			border: 1rpx solid #838383;
			border-radius: 50rpx;
		}

		.star1 {
			position: absolute;
			top: 0;
			left: 30rpx;
		}

		.star2 {
			position: absolute;
			top: 24rpx;
			right: 120rpx;
		}

		.star3 {
			position: absolute;
			top: 0;
			right: 280rpx;
		}

		.goods-info-box {
			background-image: linear-gradient(to bottom, #f9f2d8, #fff, #fff, #fff);

			.goods-info {
				.goods-name {
					width: 208rpx;
					height: 74rpx;
					font-size: 26rpx;
					font-weight: 600;
				}
			}
		}

	}
</style>